<template>
	<view class="mp-header">
		
	
	<view class="sys-head" :style="{ paddingTop: statusBarHeight }">
	
		<view class="search_box">
			<u-search :placeholder=searchKeyword v-model="params.keyword" @custom="search" :action-text='searchText' :action-style='searchStyle'></u-search>
		</view>

		<view class="card">
			<u-tabs-swiper ref="uTabs" :list="listCard" :current="current" @change='tabsChange' :is-scroll="false"
				swiperWidth="750" activeColor="#aa0000" inactive-color="#606266"></u-tabs-swiper>
		</view>

		<view class="wrap">
			<!-- <u-button @click="clear">清空列表</u-button> -->
			<u-waterfall v-model="list" ref="uWaterfall" style="padding:0 8px;">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">

						<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
						<view class="demo-title">
							{{item.storeName}}
						</view>
						<view class="demo-price">
							{{item.price}}U
						</view>
						<view class="up_btn">
							<view class="title">
								<!-- $13133USDT -->
							</view>
							<view class="btn_go">
								<u-button :custom-style="customStyle" @click="goBuy(item)">{{$t('mail.product.go-buy')}}</u-button>
							</view>
						</view>

					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
						<view class="demo-title">
							{{item.storeName}}
						</view>
						<view class="demo-price">
							{{item.price}}U
						</view>

						<view class="up_btn">
							<view class="title">
								<!-- $13133USDT -->
							</view>
							<view class="btn_go">
								<u-button :custom-style="customStyle" @click="goBuy(item)">{{$t('mail.product.go-buy')}}</u-button>
							</view>
						</view>
						<!-- 		<view class="demo-shop">
						{{item.shop}}
					</view> -->
					</view>
				</template>
				
			</u-waterfall>
		
			<!-- @loadmore="addRandomData" -->
		</view>
			<u-loadmore v-if="!goodScroll" bg-color="rgb(240, 240, 240)" :status="loadStatus" :load-text="loadText"></u-loadmore>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		getCategory,
		getProducts
	} from '@/api/new.js';
	import { setTabBarText } from '@/libs/locale.js';
	export default {
		data() {
			return {
				errorImg:"../../static/images/error.jpg",
				loadingImg:"../../static/images/loading.png",
				goodScroll: true,
				customStyle: {
					// marginTop: '20px',
					background: '#169bd5',
					width: '75px',
					height: '30px',
					color: '#fff'

				},
				searchStyle:{
					width: 90+'rpx'
				},
				searchText:this.$t('public.search'),
				keyword: '',
				listCard: [],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loadStatus: this.$t('public.tips.load-more'),
				flowList: [],
				list: [],
				dataId:'',
				statusBarHeight: statusBarHeight,
				searchKeyword: this.$t('mail.search.keyword'),
				loadText: {
					loadmore: this.$t('public.tips.load-more'),
					loading: this.$t('public.tips.now-loading'),
				
				},
				params: { //精品推荐分页
					page: 1,
					limit: 10,
					cid: '',
					keyword: ''
				},
			}
		},
		created() {
			// this.addRandomData();
			this.getList()
			console.log(this.statusBarHeight,'statusBarHeight');
		},
		mounted(){
			this.getData()
			console.log(this.statusBarHeight,'statusBarHeight');
		},
		onShow(){
			if(uni.getStorageSync('needUpdateTabBar')){
				uni.removeStorageSync('needUpdateTabBar');
				setTabBarText.call(this);
			}
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			
			setTimeout(() => {
				// this.addRandomData();
				
				this.loadStatus = 'loadmore';
			}, 1500)
			
			// this.$util.Tips({
			// 	title: this.$t('public.tips.no-data')
			// });
			
			// this.getData()
			// 模拟数据加载
			// setTimeout(() => {
			// 	this.addRandomData();
			// 	this.loadStatus = 'loadmore';
			// }, 1000)
		},
		methods: {
			goBuy(item){
				
				let data = {
					id:item.id,
					img:item.image,
					price:item.price,
					storeName:item.storeName,
					otPrice:item.otPrice,
				}
				uni.navigateTo({
					url:`/pages/new_Shop/submitOrder/submitOrder?id=${item.id}&img=${item.image}&price=${item.price}&storeName=${item.storeName}&otPrice=${item.otPrice}&content=${item.content}`
				})
				console.log(item,'item');
			},
			searchSubmitValue() {},
			getList() {
				
				let ch = uni.getStorageSync('AppLocale').code
				getCategory().then(res => {
				// let data ={
				// 			id:'',
				// 			name:"全部",
				// 			sort:0
				// 		}
				// 	this.listCard = res.data
					// this.listCard.unshift(data)
					let data = {
						id: '',
						name: ch == 'en' ? 'All' : "全部",
						sort: 0
					}
					this.listCard.unshift(data)
					
					
					
					let arr = res.data
					arr.forEach(item => {
						if (item.name.includes('|')) {
							if (ch == "en") {
								item.name = item.name.split('|')[0]
							} else {
								item.name = item.name.split('|')[1]
							}
					
						}
					
					})
					this.listCard = [...this.listCard,...arr]
							
					// console.log(res.data,'........');
					// this.dataId = res.data[0].id
					// console.log(this.dataId,'listCard');
				})
				
			},
			getData(id){
				// let id = res.data[0].id
				// if(id){
					let that = this
					console.log(this.goodScroll,'this.goodScroll');
					if (!this.goodScroll) return
					this.loadStatus = 'loading'
					// this.$refs.uWaterfall.clear()
					let ch = uni.getStorageSync('AppLocale').code
					if(this.params.cid == id){
						
					}else{
						this.$refs.uWaterfall.clear()
						this.params.cid = id
					}
					getProducts(this.params).then(res => {
						if(res.data.list==[]){
						  return this.$util.Tips({
								title: this.$t('public.tips.no-data')
							});
						}
					this.goodScroll = res.data.list.length >= this.params.limit
					
						// this.list = res.data.list
						let arr = [...this.list,...res.data.list ]
						
						
						console.log(res.data.list,'res.data.list');
		
						arr.forEach(item=>{
							if(item.storeName.includes('|')){
								if(ch == "en"){
									item.storeName = item.storeName.split('|')[0]
								}else{
									item.storeName = item.storeName.split('|')[1]
								}
								
							}
							
						})
						this.list = arr
						
						
						this.loadStatus = 'loadmore'
						console.log(res, 'resss');
					})
				// }else{
				// 	this.$refs.uWaterfall.clear()
				// 	getCategory().then(res => {
				// 		let data ={
				// 			id:'',
				// 			name:"全部",
				// 			sort:0
				// 		}
				// 		this.listCard.unshift(data)		
				// 		getProducts(res.data[0].id,this.keyword).then(res => {
							
				// 			this.loadStatus = '没有更多了'
				// 			this.list = res.data.list
				// 			console.log(res, 'aaaaa');
				// 		})
				// 	})
					
					
				// }
				
			},
			search() {
				this.getData(this.searchId,this.keyword)
				console.log('搜索了', this.keyword);
			},
			// tabs通知swiper切换
			tabsChange(index) {
				
				
				let id = this.listCard[index].id
				console.log(id,'ppppooo');
				this.swiperCurrent = index;
				this.current = index
				this.searchId = id
				this.goodScroll = true
				this.params.page = 1
				this.getData(id)
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			// addRandomData() {
			// 	for (let i = 0; i < 10; i++) {
			// 		let index = this.$u.random(0, this.list.length - 1);
			// 		// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
			// 		let item = JSON.parse(JSON.stringify(this.list[index]))
			// 		item.id = this.$u.guid();

			// 		this.flowList.push(item);
			// 	}
			// },
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			onReachBottom() {
				let that = this
				console.log('上拉了');
				// this.loadStatus = 'loading'
				this.params.page++
				that.getData(that.params.cid)
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	
	.title_center {
				padding: 20px;
				// padding: 20px 0 0;
				font-size: 32rpx;
				text-align: center;
				background-color: #FFFFFF;
			}

	.search_box {
		position: sticky;
		top: 0;
		z-index: 999999;
		padding: 10px 10px;
		background-color: #FFFFFF;
		
	}

	.card {
		position: sticky;
		top: 90rpx;
		z-index: 999999;
	}

	.up_btn {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 14px;
			font-weight: bold;
			color: red;
		}

		.btn_go {
			margin-left: 8px;
		}
	}

	.demo-warter {
		border-radius: 8px;
		margin: 3px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>